<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
          <el-form-item label="园所性质：" prop="schoolType">
          <el-select v-model="queryParams.schoolType" placeholder="请选择园所性质" clearable size="small">
            <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
            <el-form-item label="日期：" prop="type">
                <el-date-picker
                       v-model="dateTime"
                       type="date"
                       size="small"
                       value-format="yyyy-MM-dd"
                       @change="onChangeDate"
                       :picker-options="pickerOptions"
                       placeholder="选择日期">
                     </el-date-picker>
         </el-form-item>
         <el-form-item label="地区类型：" prop="type">
          <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small" :disabled="dateTime==null?true:false">
            <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
         <el-form-item label="园所名称：" prop="schoolName">
                        <el-input
                          v-model="queryParams.schoolName"
                          @input="handleInput"
                          :disabled="dateTime==null?true:false"
                          placeholder="请输入园所名称"
                          clearable
                          size="small"
                        />
                      </el-form-item>
         <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="ysList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
              <el-table-column  align="center" label="日期"  prop="attendanceDate"></el-table-column>
              <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
              <el-table-column  align="center" label="园所性质"  prop="schoolType" :formatter="schoolTypeFormat"></el-table-column>
              <el-table-column  align="center" label="地区类型"  prop="nature" :formatter="schoolNatureFormat"></el-table-column>
              <el-table-column  align="center" label="已入园人数"  prop="attendance0"></el-table-column>
              <el-table-column  align="center" label="事假人数"  prop="attendance4"></el-table-column>
              <el-table-column  align="center" label="病假人数" prop="attendance3"></el-table-column>
              <el-table-column  align="center" label="入园率"  prop="attendancePro"></el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
           </el-table>
           <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    <!-- <div class="charts"  >
        <div class="title">入园率{{ 95 }}%</div>
            <div  ref="chartpDom" class="chart_dom"></div>
    </div> -->
     <!-- 园所内各个班级入园情况 -->
     <el-dialog title="班级入园情况" :visible.sync="open" width="950px" append-to-body :close-on-click-modal="false">
        <el-form :model="classParams" ref="queryForm" :inline="true"  label-width="88px">
            <el-form-item label="年级：" prop="grade">
                <el-select v-model="classParams.grade" placeholder="请选择年级" clearable size="small"  @change="getGradechange">
            <el-option v-for="dict in gradeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
          </el-form-item>
            <el-form-item label="班级：" prop="class">
                <el-select v-model="classParams.class" placeholder="请选择班级" clearable size="small">
                  <el-option v-for="item in classOptions" :key="item.id" :label="item.title" :value="item.id" />
                 </el-select>
             </el-form-item>
         <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="classQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="classReset">重置</el-button>
         </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="bjList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex1" width="80"></el-table-column>
              <el-table-column  align="center" label="年级"  prop="grade" :formatter="gradeTypeFormat"></el-table-column>
              <el-table-column  align="center" label="班级"  prop="className"></el-table-column>
              <el-table-column  align="center" label="已入园人数"  prop="attendance0"></el-table-column>
              <el-table-column  align="center" label="事假人数"  prop="attendance4"></el-table-column>
              <el-table-column  align="center" label="病假人数" prop="attendance3"></el-table-column>
              <!-- <el-table-column  align="center" label="入园率"  prop="ryl"></el-table-column> -->
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleClass(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
           </el-table>
           <pagination v-show="classtotal>0" :total="classtotal" :page.sync="classParams.pageNum" :limit.sync="classParams.pageSize"
        @pagination="getClassData" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="classOk">确 定</el-button>
        </div>
      </el-dialog>
        <!-- 单个幼儿入园情况 -->
     <el-dialog title="学生入园情况" :visible.sync="childOpen" width="900px" append-to-body :close-on-click-modal="false">
        <el-form :model="childParams" ref="childForm" :inline="true"  label-width="88px">
            <el-form-item label="学生姓名：" prop="name">
                        <el-input
                          v-model="childParams.name"
                          placeholder="请输入学生姓名"
                          clearable
                          size="small"
                        />
                      </el-form-item>
         <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="childQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="childReset">重置</el-button>
         </el-form-item>
    </el-form>
     <el-table  :data="childsList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex2" width="80"></el-table-column>
              <!-- <el-table-column  align="center" label="年级"  prop="name"></el-table-column>
              <el-table-column  align="center" label="班级"  prop="name"></el-table-column> -->
              <el-table-column  align="center" label="学生姓名"  prop="name"></el-table-column>
              <el-table-column  align="center" label="入园结果"  prop="attendanceName"></el-table-column>
              <el-table-column  align="center" label="入园时间"  prop="inTime"></el-table-column>
              <el-table-column  align="center" label="离园时间"  prop="outTime"></el-table-column>

              <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleClass(scope.row)"
                    v-hasPermi="['oa:read:view']"
                  >查看</el-button>
                </template>
              </el-table-column> -->
      </el-table>
           <pagination v-show="childtotal>0" :total="childtotal" :page.sync="childParams.pageNum" :limit.sync="childParams.pageSize"
        @pagination="getStudentList" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="childOk">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
  import { specificList,clazzList,classData,studentList } from "@/api/qu/qyyerygk";
  import moment from "moment";
 export default {
   name: "ysgyxx",
   data() {
     return {
         schoolCode:'',
         loading:true,
         dateTime:new Date(),
         pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
            },
          // 查询参数
          queryParams: {
             name:'',
             nature:'',
             pageNum: 1,
             pageSize: 10,
             schoolType:''
           },
           schoolNatureOptions:[],
           schoolTypeOptions:[],
           gradeOptions:[],
           classOptions:[],
           charts:null,
           ysList:[],
           bjList:[],
           childsList:[],
           total:0,
           classtotal:0,
           childtotal:0,
           open:false,
           classParams:{
             class:'',
             grade:'',
             pageNum: 1,
             pageSize: 10,
           },
           childParams:{
            name:'',
            pageNum: 1,
             pageSize: 10,
           },
           childOpen:false,
           classCode:'',
           gradeId:''
        }
   },
   created() {
        this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
         this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
        });
        // this.getDicts("classname_type").then(response => {
        //   this.classOptions = response.data;
        // });
        this.getDicts("year_type").then(response => {
          this.gradeOptions = response.data;
        });
   },
   mounted(){
        this.getList()
        // this.charts = this.$echarts.init(this.$refs.chartpDom);
        // this.chartsFun();
   },
   methods: {
        async getList(){
            this.loading=true;
            try {
              const obj={
                nature:this.queryParams.nature,
                schoolName:this.queryParams.schoolName,
                inTime:moment(this.dateTime).format("YYYYMMDD"),
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
                schoolType:this.queryParams.schoolType
              }
             const data =  await specificList(obj)
             this.ysList=data.rows;
             this.total=data.total
            //  console.log(data);
             this.loading=false;
            } catch (error) {
              console.log(error);
            }
        },
        //clazzList 获取班级列表
       async  getClazzList(){
            try {
               const obj ={
                 schoolCode:this.schoolCode,
                 year:this.classParams.grade
               }
              const data=  await  clazzList(obj)
              this.classOptions=data.rows;
              // console.log(data);
            } catch (error) {
              console.log(error);
            }
        },
        getGradechange(){
            this.getClazzList()
        },
        //下钻到班级层面
        async getClassData(){
            try {
              const obj={
                schoolCode:this.schoolCode,
                inTime:moment(this.dateTime).format("YYYYMMDD"),
                grade:this.classParams.grade,
                classCode:this.classParams.class,
                pageNum: this.classParams.pageNum,
                pageSize: this.classParams.pageSize,
              };
              const data= await classData(obj);
              this.bjList=data.rows;
              this.classtotal=data.total;
              // console.log(data);
            } catch (error) {
              console.log(error);
            }
        },
        //下钻到幼儿层面
        async  getStudentList(){
          try {
            const obj ={
                schoolCode:this.schoolCode,
                inTime:moment(this.dateTime).format("YYYYMMDD"),
                classCode:this.classCode,
                grade:this.gradeId,
                name:this.childParams.name,
                pageNum: this.childParams.pageNum,
                pageSize: this.childParams.pageSize,
            }
            const data=  await studentList(obj)
            this.childsList=data.rows;
            this.childtotal=data.total;
            // console.log(data);
          } catch (error) {
              console.log(error);
          }
        },
          // 年级字典翻译
          gradeTypeFormat(row, column) {
            return this.selectDictLabel(this.gradeOptions, row.grade);
         },
            //地区类型字典翻译
       schoolNatureFormat(row, column) {
        return this.selectDictLabel(this.schoolNatureOptions, row.nature);
      },    // 园所性质字典翻译
    schoolTypeFormat(row, column) {
      return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
    },
          // 序号
       customeIndex(index){
         return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
      },
         // 序号
         customeIndex1(index){
         return index+1+(this.classParams.pageNum-1)*this.classParams.pageSize
      },
         // 序号
         customeIndex2(index){
         return index+1+(this.childParams.pageNum-1)*this.childParams.pageSize
      },
      //打开园所内各个班级弹框
       handleView(val){
          //  console.log(val);
            this.schoolCode=val.schoolCode;
            this.getClazzList();
            this.getClassData();
            this.open=true;
       },
       classQuery(){
          this.getClassData();
       },
       classReset(){
        this.classParams={
             grade:'',
             grade:'',
             pageNum: 1,
             pageSize: 10,
        };
        this.classParams.grade='';
        this.getClazzList();
        this.getClassData();
       },
       classOk(){
        this.open=false;
        this.classParams={
             class:'',
             grade:'',
             pageNum: 1,
             pageSize: 10,
        }
       },
       classCancel(){
         this.open=false;
         this.classParams={
             class:'',
             grade:'',
             pageNum: 1,
             pageSize: 10,
        }
       },
        //打开园所内各个班级的幼儿弹框
       handleClass(val){
        //  console.log(val);
         this.childOpen=true;
         this.classCode=val.classCode;
         this.gradeId=val.grade,
         this.getStudentList()
       },
       //搜索单个幼儿情况
       childQuery(){
          this.getStudentList()
       },
        //重置单个幼儿情况
       childReset(){
        this.childParams={
          name:'',
          pageNum: 1,
          pageSize: 10,
        }
        this.resetForm("childForm");
        this.getStudentList()
       },
       childOk(){
            this.childOpen=false;
            this.childParams={
                name:'',
                pageNum: 1,
                pageSize: 10,
            }
       },
       childCancel(){
        this.childOpen=false;
        this.childParams={
                name:'',
                pageNum: 1,
                pageSize: 10,
            }

       },
        onChangeDate(val){
          console.log(val);
        },
        handleInput(val){
           let regtszf = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g // 特殊字符正则
           let regkg = /[ ]/g// 空格正则
           this.queryParams.schoolName = val.replace(regtszf, '').replace(regkg, '')
         },
       /** 搜索按钮操作 */
       handleQuery() {
        if(this.dateTime==null){
          this.$message.error({
                    message: "请先选择日期",
                    duration: 3000,
                    showClose: true,
                    center: true,
                    dangerouslyUseHTMLString: false,
                    // offset: 400
                   });
            this.ysList=[];
        }else{
          this.queryParams.pageNum = 1;
          this.getList();
        }
        },
         /** 重置按钮操作 */
         resetQuery() {
          this.resetForm("queryForm");
          this.dateTime=new Date(),
          this.queryParams={
            nature:'',
            schoolName:'',
            pageNum: 1,
            pageSize: 10,
          }
          this.handleQuery();
        },
        chartsFun(){
            const option = {
           // backgroud:'#333',
           title: {
             text: '园所出勤情况统计',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                 interval: 0,//使x轴文字显示全
                },
                data: ['已入园', '事假', '病假', ]
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    // name: '出勤情况',
                    type: 'bar',
                    stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: [2, 2, 3,  ],
                },
            ]
            }
              // 使用刚指定的配置项和数据显示图表
              this.charts.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
        },
        //监听窗口缩放事件
        monitorResize(){
          this.charts.resize();
        },
   }
 };
</script>
<style lang="scss" scoped>
 .charts{
            // margin-top: 10px;
            width:75%;
            height: 500px;
            .title{
                position: relative;
                top: 30px;
                left: 45%;
                font-weight: 700;
                font-size: 18px;
                color: #2a77cf;
            }
            // border: 1px red solid;
            .chart_dom{
                width:100%;
                height: 100%;
            }
        }
</style>
